<template>
	<view class="page">
		<view class="pageBg">
			<image src="https://bjsx.gzwhir.com/admin-api/infra/file/18/get/memberbg2.png" mode="aspectFill"></image>
		</view>
		<view class="flex0">
			<u-navbar :fixed='false'  bgColor="transparent" @leftClick="navBack"  title="预约记录详情">
				<view slot="center" class="navTitle">
					预约记录详情
				</view>
			</u-navbar>
		</view>
		<view class="flex1">
			<scroll-view scroll-y="true" class="scrollView pt30">
				<view class="pd30">
					<view class="appointDetail" v-if="info">
						<view class="tp" v-if="info.status==3">
							<view class="ico">
								<image src="@/static/images/icon-happyface.svg" mode="aspectFit"></image>
							</view>
							<view class="tit">
								已完成
							</view>
						</view>
						<view class="tp" v-if="info.status==4">
							<view class="ico">
								<image src="@/static/images/icon-cancel.svg" mode="aspectFit"></image>
							</view>
							<view class="tit">
								已取消
							</view>
						</view>
						<view class="wbox">
							<view class="line">
								<view class="ll">
									学校名称
								</view>
								<view class="lr">
									{{info.schoolName}}
								</view>
							</view>
							<view class="line">
								<view class="ll">
									教室地点
								</view>
								<view class="lr">
									{{info.location}}
								</view>
							</view>
							<view class="line">
								<view class="ll">
									预约日期
								</view>
								<view class="lr">
									<text>{{info.date|dateFormate('YYYY-MM-DD')}}</text>
									<text style="padding-left: 10rpx;">{{info.date|dateFormate('week')}}</text>
								</view>
							</view>
							<view class="line">
								<view class="ll">
									具体时间
								</view>
								<view class="lr">
									{{info.time}}
								</view>
							</view>
							<view class="line">
								<view class="ll">
									负责教师
								</view>
								<view class="lr">
									<text>{{info.expert.name}}</text>
									<text>({{info.expert.position}})</text>
								</view>
							</view>
						</view>
						<view class="wbox">
							<view class="line">
								<view class="ll">
									预约学生  
								</view>
								<view class="lr">
									{{info.person.name}}
								</view>
							</view>
							<view class="line">
								<view class="ll">
									所在班级
								</view>
								<view class="lr">
									{{info.person.grade}}
								</view>
							</view>
							<view class="line">
								<view class="ll">
									实际预约人
								</view>
								<view class="lr">
									<text>{{info.appointPerson.name}}</text>
									<text>({{info.appointPerson.utype}})</text>
								</view>
							</view>
						</view>
						<view class="wbox">
							<view class="lint">
								咨询问题描述
							</view>
							<text class="textarea">
								{{info.message}}
							</text>
							<view class="dabtn" v-if="info.status==1||info.status==2">
								查看学生心理健康档案
							</view>
						</view>
						<template v-if="info.status==2">
							<view class="wbox">
								<view class="lint">
									访谈记录
								</view>
								<textarea class="textarea" v-model="form.content1" placeholder="填写访谈记录内容..."></textarea>
							</view>
							<view class="wbox">
								<view class="lint">
									综合评估
								</view>
								<textarea class="textarea" v-model="form.content2" placeholder="填写访谈记录内容..."></textarea>
							</view>
							<view class="wbox">
								<view class="lint">
									问题表现
								</view>
								<textarea class="textarea" v-model="form.content3" placeholder="填写问题表现内容..."></textarea>
							</view>
							<view class="wbox">
								<view class="lint">
									原因分析
								</view>
								<textarea class="textarea" v-model="form.content4" placeholder="填写原因分析内容..."></textarea>
							</view>
							<view class="wbox">
								<view class="lint">
									辅导策略及过程
								</view>
								<textarea class="textarea" v-model="form.content5" placeholder="填写辅导策略及过程内容..."></textarea>
							</view>
							<view class="wbox">
								<view class="lint">
									辅导追踪
								</view>
								<textarea class="textarea" v-model="form.content6" placeholder="填写辅导追踪内容..."></textarea>
							</view>
							<view class="wbox">
								<view class="lint">
									辅导效果
								</view>
								<textarea class="textarea" v-model="form.content7" placeholder="填写辅导效果内容..."></textarea>
							</view>
						</template>
						<template v-if="info.status==3">
							<view class="wbox">
								<view class="lint">
									访谈记录
								</view>
								<text class="textarea">{{info.content1}}</text>
							</view>
							<view class="wbox">
								<view class="lint">
									综合评估
								</view>
								<text class="textarea">{{info.content2}}</text>
							</view>
							<view class="wbox">
								<view class="lint">
									问题表现
								</view>
								<text class="textarea">{{info.content3}}</text>
							</view>
							<view class="wbox">
								<view class="lint">
									原因分析
								</view>
								<text class="textarea">{{info.content4}}</text>
							</view>
							<view class="wbox">
								<view class="lint">
									辅导策略及过程
								</view>
								<text class="textarea">{{info.content5}}</text>
							</view>
							<view class="wbox">
								<view class="lint">
									辅导追踪
								</view>
								<text class="textarea">{{info.content6}}</text>
							</view>
							<view class="wbox">
								<view class="lint">
									辅导效果
								</view>
								<text class="textarea">{{info.content7}}</text>
							</view>
						</template>
						<template v-if="info.status==4">
							<view class="wbox" v-if="info.cancel">
								<view class="line">
									<view class="ll">
										取消人
									</view>
									<view class="lr">
										{{info.cancel.name}}
									</view>
								</view>
								<view class="line">
									<view class="ll">
										取消时间
									</view>
									<view class="lr">
										{{info.cancel.date}}
									</view>
								</view>
								<view class="line">
									<view class="ll">
										取消原因
									</view>
									<view class="lr">
										<text>{{info.cancel.reson}}</text>
									</view>
								</view>
							</view>
						</template>
						<view class="btns" v-if="info.status==1">
							<view class="btn gray" @tap="show=true">
								取消预约
							</view>
							<view class="btn">
								咨询完成
							</view>
						</view>
						<view class="btns" v-if="info.status==2">
							<view class="btn">
								提交
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		<u-modal :show="show" title="取消说明" @confirm="cancelSubmit" @cancel="show=false" :showCancelButton="true" :buttonReverse="true" cancelColor="#bcb6b4" confirmColor="#fe9c29">
			<view class="slot-content">
				<textarea class="resonTextarea" placeholder="请输入取消原因" v-model="reson"></textarea>
			</view>
		</u-modal>
	</view>
</template>

<script>
	export default {
		onShow:function(){
			var pages = getCurrentPages();
			var page = pages[pages.length - 1];
			if(page.options['id']){
				this.$data.itemid = page.options['id'];
			}
		},
		data() {
			return {
				show:false,
				itemid:'101',
				info:{},
				reson:'',
				form:{
					content1:'',
					content2:'',
					content3:'',
					content4:'',
					content5:'',
					content6:'',
					content7:''
				}
				
			}
		},
		watch:{
			itemid:function(){
				this.getInfo();
			}
		},
		methods: {
			cancelSubmit(){//取消预约
				console.log(this.reson);
				this.show=false;
			},
			getInfo(){
				var that=this;
				if(that.itemid){
					var res={
						id:101,
						status:4,
						schoolName:'北京市海淀一中',
						location:'综合楼三楼301室（心理咨询室）',
						date:' 2024-09-09',
						time:'14:00-15:00',
						expert:{
							id:101,
							name:"李浩楠",
							type:0,
							position:'心理专职教师',
							image:'../../static/upload/exp1.png',
							desc:'学校专职心理辅导老师，帮助学生解决问题',
							tag:'校内心理辅导专职教师'
						},
						person:{
							name:'刘美美',
							grade:'九年级一班'
						},
						appointPerson:{
							name:'刘大美',
							utype:'家长'
						},
						message:`1、xxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx\n2、xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx`,
						content1:'1、xxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx\n2、xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
						content2:'1、xxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx\n2、xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
						content3:'1、xxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx\n2、xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
						content4:'1、xxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx\n2、xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
						content5:'1、xxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx\n2、xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
						content6:'1、xxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx\n2、xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
						content7:'1、xxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx\n2、xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx',
						cancel:{
							name:'学生',
							date:'2024-09-11  12:00',
							reson:'xxxxxxxxxxxxx xxxxxxxxxxxxxxxxxxxxx\nxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx'
						}
					};
					that.info=res;
				}
			}
		},
		mounted(){
			this.getInfo();
		}
	}
</script>

<style lang="scss" scoped>
	.slot-content{
		flex: 0 0 auto;
		width: 100%;
	}
	/deep/.u-popup__content{
		border-radius: 30rpx !important;
		.u-modal__title{
			font-size: 40rpx !important;
			color: #65554d !important;
			padding-top: 40rpx !important;
			line-height: 1;
			font-weight: normal !important;
		}
		.u-modal__content{
			padding: 40rpx 40rpx 0 !important;
		}
		.u-line{
			display: none;
		}
		.u-modal__button-group__wrapper{
			height: 120rpx;
			border-radius: 0 !important;
			.u-modal__button-group__wrapper__text{
				font-size: 28rpx !important;
			}
		}
	}
	.resonTextarea{
		padding: 20rpx;
		height: 300rpx;
		outline: none;
		border: none;
		background: #f9f8f6;
		border-radius: 20rpx;
		font-size: 28rpx;
		color: #897f7a;
		line-height: 1.6;
		width: 100%;
		box-sizing: border-box;
	}
	.appointDetail{
		padding-bottom: 40rpx;
		.tp{
			padding: 40rpx 0 60rpx;
			.ico{
				width: 90rpx;
				height: 90rpx;
				margin: 0 auto 30rpx;
				image{
					display: block;
					width: 100%;
					height: 100%;
				}
			}
			.tit{
				text-align: center;
				font-size: 48rpx;
				font-weight: bold;
				line-height: 1;
				color: #65554d;
				margin-bottom: 20rpx;
			}
			.time{
				text-align: center;
				font-size: 28rpx;
				color: #65554d;
			}
		}
		.btns{
			display: flex;
			align-items: center;
			padding-top: 40rpx;
			.btn{
				flex: 1 1 auto;
				text-align: center;
				line-height: 90rpx;
				height: 90rpx;
				outline: none !important;
				background: #fe9c29;
				color: #fff;
				border: none;
				border-radius: 90rpx;
				overflow: hidden;
				font-size: 28rpx;
				margin-right: 20rpx;
				&:last-child{
					margin-right: 0;
				}
				&:before,&:after{
					display: none;
				}
				&.gray{
					background: #fff;
					color: #fe9c29;
					width: 250rpx;
					flex: 0 0 auto;
				}
			}
		}
		.wbox{
			padding: 0 40rpx;
			background: #fff;
			border-radius: 30rpx;
			margin-bottom: 20rpx;
			overflow: hidden;
			&:last-child{
				margin-bottom: 0;
			}
			.lint{
				font-size: 28rpx;
				padding-top: 30rpx;
				color: #65554d;
				font-weight: bold;
			}
			.textarea{
				border: none;
				background: #fff;
				font-size: 28rpx;
				color: #65554d;
				outline: none;
				line-height: 1.5;
				padding: 30rpx 0 40rpx;
				display: block;
			}
			.dabtn{
				line-height: 100rpx;
				text-align: center;
				background: #ffebd4;
				margin: 0 -40rpx;
				color: #fe9c29;
				font-size: 28rpx;
			}
			.line{
				flex: 0 0 auto;
				display: flex;
				align-items: center;
				height: 100rpx;
				justify-content: space-between;
				border-bottom: 1rpx solid #f7f5f2;
				font-size: 28rpx;
				&:last-child{
					border: none;
				}
				.ll{
					flex: 0 0 auto;
					overflow: hidden;
					padding-right: 30rpx;
					color: #897f7a;
				}
				.lr{
					flex: 1 1 auto;
					display: flex;
					align-items: center;
					text-align: right;
					justify-content: flex-end;
					color: #65554d;
					.ico{
						flex: 0 0 auto;
						margin-left: 10rpx;
						image{
							display: block;
							width: 11rpx;
							height: 19rpx;
						}
					}
					.cur{
						flex: 0 0 auto;
					}
				}
			}
		}
	}
</style>
